<template>
  <div>
    <div class="main">
  <div class="community">
    <div class="communityItem">
      <h1>社区介绍</h1>
       <p>位于上海浦东陆家嘴金融区滨江大道旁，由两栋40层和两栋44层的豪华公寓和一座高级江景会所构成<br>
         ，面积在434～1206平方米，共220套。是按照别墅尺度进行规划设计的高档公寓，其中A幢D幢为一层<br>
         一户 ，平层面积约为597平方米，复式面积约为824-986㎡；B幢与C幢为一层两户，单套平层面积约为<br>
         435平方米，复式面积约为605-1206㎡；目前，A幢及C幢在售，B幢与D幢出租。</p>
       <img src="../../../public/image/sq.jpg" alt="">
    </div>
    <div class="communityItem">
      <p>一样的景观，观不一样的景<br>

        外滩、浦江、陆家嘴……每个方向都是一幕世界级景观大作——即使是儿童房，也拥有与众不同的开阔视野和独特景观，让孩子从小拥有不凡的眼界与气度。</p>
      <img src="../../../public/image/sq1.jpg" alt="">
    </div>
    <div class="communityItem">
      <p>瑞龙含珠，吉祥如意<br>

小区水景流线和外形特别设计为龙形，以与江水之势相互呼应。圆形的大堂象征珍珠，与水系合为-体，构成一幅“瑞龙含珠”的吉祥如意图</p>
       <img src="../../../public/image/sq2.jpg" alt="">
    </div>
    <div class="communityItem">
      <p>艺术回廊，构建内部私密交通线<br>

由主体建筑的一层及建筑之间的观景连廊构成的艺术回廊，既保障了内部，交通的私密性，也为整个社区拓展了艺术表现空间及公共休闲空间。</p>
       <img src="../../../public/image/sq3.jpg" alt="">
    </div>
    <div class="communityItem">
      <p>前面是一种历史的风景，后面是一个国家的经济</p>
       <img src="../../../public/image/sq4.jpg" alt="">
    </div>
  </div>
    </div>
  </div>
</template>
<script>
export default {
 
}
</script>
<style lang="less" scoped>

.main{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  .community{
    width: 80%;
    height: 75vw;
   display: grid;
  grid-template-columns: 25vw 25vw 25vw;
  grid-template-rows: 25vw 25vw 25vw;
   grid-auto-flow: column dense;
  grid-gap :10px;
    margin-top: 10px;
    padding: 2vw;
    .communityItem{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background: white;
      border-radius: 15px;
      padding: 0.5vw;
    img{
         width: 80%;
         height: 40%;
       }
           p{
         text-align: center;
         font-weight: 300;
       }
      

       *{
         margin: 20px 0;
       }
      &:nth-child(1){
       grid-column-start: 1;
       grid-column-end: 3; 
       grid-row-start: 1;
       grid-row-end: 3;
   
      }
       &:nth-child(5){
 grid-row-start: 2;
       grid-row-end: 4;
       img{
         height: 70%;
       }
       }
    }
    
  }
}


</style>